import { CommandDialog } from '@amcax/base';
import { CommandLabeledItemWrapper } from '@app-cad/common/components/command-form/item-wrapper';
import i18n from '@app-cad/common/utils/i18next';
import { CurvedBaseCommand, CurvedCmdDialogParams } from '@app-cad/types';
import { Select } from 'antd';
import { useEffect, useState } from 'react';
import { useSwitchVisibility } from '../common/hooks/useSwitchVisibility';
import { CounterboredHole } from './counterbored-hole';
import { CounterdrilledHole } from './counterdrilled-hole';
import { CountersunkHole } from './countersunk-hole';
import './index.scss';
import { StraightHole } from './straight-hole';
import { TaperedHole } from './tapered-hole';

const CommandHole = ({ title, onClose, props }: CurvedCmdDialogParams) => {
  const [mode, setMode] = useState<
    'Simple' | 'Tapered' | 'Counterbored' | 'Countersunk' | 'Counterdrilled'
  >('Simple');

  const { prelinkshide, dxid } = (props || {}) as any;
  useSwitchVisibility(prelinkshide, dxid);

  const [formData, setFormData] = useState<any>({});
  const [editProps, setEditProps] = useState<any>();
  const [editDxid, setEditDxid] = useState<string>();

  useEffect(() => {
    setMode(props?.params?.type ? props?.params?.type : 'Simple');
    setEditProps(props);
    setEditDxid(props?.shape);
  }, [props?.shape]);

  return (
    <CommandDialog
      title={title}
      onClose={onClose}
      placement='topLeft'
    >
      <CommandLabeledItemWrapper
        className='mt-5 px-5'
        label='类型'
      >
        <Select
          disabled={editDxid != null}
          options={[
            { value: 'Simple', label: '直孔' },
            { value: 'Tapered', label: '锥形孔' },
            { value: 'Counterbored', label: '沉头孔' },
            { value: 'Countersunk', label: '埋头孔' },
            { value: 'Counterdrilled', label: '埋头钻孔' },
          ]}
          value={mode}
          onChange={(val) => {
            if (val !== mode) {
              setMode(val);
              setEditProps(null);
            }
          }}
        />
      </CommandLabeledItemWrapper>
      {mode === 'Simple' && (
        <StraightHole
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
          formData={formData}
          setFormData={setFormData}
        />
      )}
      {mode === 'Tapered' && (
        <TaperedHole
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
          formData={formData}
          setFormData={setFormData}
        />
      )}
      {mode === 'Counterbored' && (
        <CounterboredHole
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
          formData={formData}
          setFormData={setFormData}
        />
      )}
      {mode === 'Countersunk' && (
        <CountersunkHole
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
          formData={formData}
          setFormData={setFormData}
        />
      )}
      {mode === 'Counterdrilled' && (
        <CounterdrilledHole
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
          formData={formData}
          setFormData={setFormData}
        />
      )}
    </CommandDialog>
  );
};

export const cmdHole: CurvedBaseCommand = {
  id: 'CmdHole',
  label: 'command.feature-hole',
  icon: 'commands/feature/feature-hole',
  create: (label, onClose, props) => (
    <CommandHole
      title={i18n.t(label)}
      onClose={onClose}
      props={props}
    />
  ),
};
